<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Loading Tabbed Panels with updateContent</title>
<script src="../../includes/SpryData.js" type="text/javascript" language="javascript"></script>
<script src="../../widgets/tabbedpanels/SpryTabbedPanels.js" type="text/javascript" language="javascript"></script>
<link href="../../widgets/tabbedpanels/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<link href="../../css/samples.css" rel="stylesheet" type="text/css" />
</head>

<body>
<h3>Loading Tabbed Panels with the updateContent Util function</h3>
<p>This sample shows how Tabbed Panels can load content dynamically, using the Spry.Utils.UpdateContent function in SpryData.js. When the tab is clicked, the HTML fragment is loaded into the Panel content DIV. The panels are each given an ID so we can direct the content to the panel.</p>
<div id="TabbedPanels1" class="TabbedPanels">
  <ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
    <li class="TabbedPanelsTab" tabindex="0" onclick="Spry.Utils.updateContent('two','frags/frag1.html');">Tab 2</li>
    <li class="TabbedPanelsTab" tabindex="0" onclick="Spry.Utils.updateContent('three','frags/frag3.html');">Tab 3</li>
  </ul>
  <div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent" id="one">This is static content. Tabs 2 and 3 have dynamically loaded content.</div>
    <div class="TabbedPanelsContent" id="two">Content 2</div>
    <div class="TabbedPanelsContent" id="three">Content 3</div>
  </div>
</div>
<p>&nbsp;</p>
<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
//-->
</script>
</body>
</html>
